<template>
  <div class="ex-pictures">
    <div class="ep-title">
      Pictures
    </div>
    <div class="ep-des">
      Introduction to Pictures
    </div>
    <!--    <Transition name="slide-fade" @after-leave="onAfterLeave">-->
    <div class="ep-content" >
      <div class="epc-card" v-for="(item, index) in picURL">
        <div class="epc-img" @click="showDetail(item)">
          <img :src="item.resourceUrl" :alt="item.title">
<!--          <simg :picUrl="item.resourceUrl" alt="logo"/>-->
        </div>
        <div class="epc-type">
          Pictures type
        </div>
        <div class="epc-title">
          {{ item.title }}
        </div>
        <div class="epc-data">
          {{ dateFilter(item.publishTime, "MM/dd/yyyy") }}
        </div>
      </div>

    </div>
    <div class="pagination-box">
      <el-pagination :page-size="query.size"
                     :background="false"
                     layout="prev, pager, next"
                     :total="query.total"
                     @current-change="handleChange"/>
    </div>
  </div>
  <div class="dialogContent">
    <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
      <ImageDetail :picUrl="currentPic.resourceUrl"
                   :hqPicUrl="currentPic.hqResourceUrl"
                   :title="currentPic.title"
                   :des="currentPic.des"
                   :publishTime="currentPic.publishTime"></ImageDetail>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'

let show = ref(true);

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  time: {
    type: String,
    required: false,
  },
});

const picURL = ref([
  `/images/car_pic/banner_on_00.jpg`,
  `/images/car_pic/banner_on_01.jpg`,
  `/images/car_pic/banner_on_02.jpg`,
  `/images/car_pic/banner_on_03.png`
])

const query = reactive({
  page: 1,
  size: 4,
  total: 10,
});

query.total = props.data.length;

picURL.value = props.data ? props.data.slice(0, 4) : [];
const handleChange = (page: number) => {

  let currentPage = document.querySelectorAll('.epc-card');
  // var nextPage = document.querySelector('.epc-card')

  for (let i= 0 ; i < currentPage.length; i ++ ){
    currentPage[i].classList.toggle('fade-out');
  }

  setTimeout(()=>{
    page = (page - 1) * 4;
    if (props.data) {
      picURL.value = props.data.slice(page, page + 4);
    }
    for (let i= 0 ; i < currentPage.length; i ++ ){
      currentPage[i].classList.toggle('fade-out');
    }
  },300);
}

const dialogVisible = ref(false)

const currentPic = ref();
const showDetail = (item: number) => {
  dialogVisible.value = true;
  currentPic.value = item;
}

// 定义state类型
// interface iSouche {
//   bannerList: string[],
//   count: number,
//   isShow: boolean
// }
// // 数据源
// const souche = reactive<iSouche>({
//   bannerList: [],
//   count: 0,
//   isShow: true
// })

onMounted(async () => {
  // 先请求数据
  props.data.map((item: string) => {
    // 创建一个图片实例
    const oImage = new Image()
    // 遍历出来的item就是图片路径
    oImage.src = item.resourceUrl;
    // 提前加载图片
    oImage.onload = () => {
      // souche.count++
      // if (souche.count >=  props.data.length) {
      //   souche.isShow = false
      // }
    }
  })
})


// const downloadClick = (link: string) => {
//   let url = link;
//   let fileName = url.slice(url.lastIndexOf("/") + 1); //下载的文件名换成自己的
//   // let fileName = item.title; //dayjs
//   var xhr = new XMLHttpRequest();
//   xhr.open("GET", url, true);
//   xhr.responseType = "blob"; // 返回类型blob
//   xhr.onload = () => {
//     if (xhr.readyState === 4 && xhr.status === 200) {
//       let blob = xhr.response;
//       let downLoadUrl = window.URL.createObjectURL(
//           new Blob([blob]
//               // ,{
//               //   type: item.type === "video" ? "video/mp4" : "image/jpeg",
//               // }
//           )
//       );
//       let a = document.createElement("a");
//       a.download = fileName;
//       a.href = downLoadUrl;
//       a.style.display = "none";
//       document.body.appendChild(a);
//       a.click();
//       a.remove();
//     }
//   };
//   xhr.send();
// }
</script>
<style scoped lang="scss">
.dialogContent {
  :deep(.el-dialog) {
    width: 1024px;
    padding: 0px;
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__footer) {
    padding: 10px;
    padding-left: 32px;
  }


  .dialogVideoContent img {
    width: 1024px;
  }

  .detailContent {
    width: 1024px;
    padding: 10px 30px;


    .detailContent-left {
      width: 900px;
      display: inline-block;
      padding: 10px;

      .dialog-title {
        line-height: 32px;
        font-size: 22px;
        color: #000;
        // margin-top: 12px;
        font-weight: 600;

      }

      .dialog-dsc {
        line-height: 22px;
        color: #000;
        font-size: 100%;

      }

      .dialog-date {
        margin-top: 12px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.25);
      }
    }

    .detailContent-right {
      width: 50px;
      display: inline-block;

      .emc-btn {
        width: 32px;
        height: 32px;
        background-image: url('/images/home/组23@2x.png');
        background-size: cover;
        border: 2px dashed rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: background-color .3s;
      }
    }

  }

}

.ex-pictures {
  position: relative;
  padding: 0px 160px;
  background: #fff;
  width: 1600px;
  // height: 900px;
  background-image: linear-gradient(rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(199, 142, 102, 0.2) 50%,
      rgba(199, 142, 102, 0.1) 67%,
      rgba(199, 142, 102, 0) 100%);

  .ep-title {
    width: 250px;
    margin-left: 675px;
    text-align: center;
    font-size: 64px;
    // color: #30363A;
    margin-bottom: 24px;
    margin-top: 40px;
    background-image: -webkit-linear-gradient(180deg, #26B7BC 0%, #26B7BC 30%, #BB916C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .ep-des {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin-bottom: 60px;
  }

  .ep-content {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    // margin-bottom: 10px;

    .epc-card {
      cursor: pointer;
      padding-bottom: 45px;
      opacity: 1; /* 初始状态为隐藏 */
      transition: opacity 0.5s ease; /* 设置过渡效果 */

      .epc-img {
        width: 370px;
        height: 227.5px;
        margin-bottom: 23px;
        background-color: rgb(202, 201, 201);
        overflow: hidden;

        img {
          width: 370px;
          height: 227.5px;
          object-fit: cover;
          transition: all 0.6s;
        }
      }


      .epc-type {
        font-size: 14px;
        color: #C78E66;
        margin-bottom: 24px;
        font-weight: bold;
      }

      .epc-title {
        width: 370px;
        height: 25px;
        color: #000000;
        margin-bottom: 24px;
        font-size: 20px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .epc-data {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.2);
      }
    }

    .fade-out {
      opacity: 0; /* 隐藏状态 */
    }

    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }
    @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }

    .epc-card:hover .epc-img img {
      transform: scale(1.05);
    }

  }

  .pagination-box {
    //position: relative;
    margin-top: 20px;
    margin-left: 1300px;
    padding-bottom:20px;

    :deep(.el-pagination) {
      //width: 100px;
      --el-pagination-button-width: 0px;
      --el-pagination-button-height: 0px;
    }

    :deep(.number) {
      font-size: 18px;
    }

    :deep(svg) {
      width: 18px;
      height: 18px;
    }

    :deep(.el-icon) {
      line-height: unset;
    }

    :deep(button) {
      background: none;
      height: 30px;
      width: 50px;
      padding: 0 4px;
    }

    :deep(.el-pager li ) {
      height: 30px;
      width: 20px;
      background: none;
    }
  }
}

.em-more-btn {
  user-select: none;
  margin-top: 65px;
  width: 296px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: rgb(199, 142, 102, 0.08);
  border-bottom: 4px solid #C78E66;
  color: #000000;
  cursor: pointer;
  transition: background-color .3s;
  font-size: 16px;
}

.em-more-btn:hover {
  background-color: rgb(199, 142, 102, 0.38);
}


.slide-fade-enter-active {
  transition-delay: 1s;
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
